<template>
  <!-- 我的宠物 -->
  <view class="footer">
    <view class="footer_title">
      {{userInfo.id !== userId? 'Ta' : '我'}}加入的圈子
      <!-- <navigator hover-class="none" url="/subpkg/more/more">更多宠物</navigator> -->
    </view>

    <!-- 宠物 -->
    <scroll-view class="my_pet" scroll-x="true">

      <!-- <view class="my_pet_list" @click="navTo('/subpkg/ldentity/ldentity?id=' + item.id)"
        v-if="getRecordItem.length !== 0" v-for="(item,i) in getcircleItem" :key="i"> -->
      <view v-if="getcircleItem.length !== 0" class="my_pet_list" v-for="(item,i) in getcircleItem" :key="i">
        <view class="my_pet_list_text">
          <view class="my_pet_list_img" @click="navTo('/subpkg/petInfo/petInfo?id=' + item.id)">
            <!-- <image v-if="item.avatar" :src="item.avatar" mode="aspectFill"></image> -->
            <image :src="item.previewImage" mode="aspectFill"></image>
          </view>
          <view class="my_pet_list_title">
            <h1>{{item.categoryName}}</h1>
            <text>{{item.joiners}}人加入</text>
          </view>
          <view class="my_pet_user_box_right" v-if="userInfo.id !== userId" @click="onJoiner(item)">
            <view :class="item.isJoined?'attention1':'attention'">{{item.isJoined?'已加入': '加入'}}</view>
          </view>
        </view>
      </view>

      <view class="my_pet_item" v-if="getcircleItem.length == 0">
        <view class="my_pet_item_text">
          <image src="/static/images/mine/gerenno.png" mode="aspectFill"></image>
          <text>还没有加入任何圈子...</text>
        </view>
      </view>

      <!-- <view class="my_pet_item" @click="navTo('/subpkg/newrecord/newrecord')">
        <view class="my_pet_item_text">
          <image src="/static/images/mine/add.png" mode="aspectFill"></image>
          <text>添加新的小伙伴</text>
        </view>
      </view> -->
    </scroll-view>
  </view>
</template>

<script>
  import {
    mapGetters
  } from 'vuex'
  import {
    behaviorJoiner
  } from "@/api/community.js";
  export default {
    name: "user_circle",
    data() {
      return {

      };
    },
    computed: {
      ...mapGetters('m_user', ['userInfo'])
    },
    props: {
      getcircleItem: {
        type: Array,
        default: []
      },
      userId: {
        type: [Number, String],
        required: true
      }
    },
    methods: {
      navTo(url) {
        uni.navigateTo({
          url: url
        })
      },
      onJoiner(item) {
        //0 圈子  1 产品  2活动
        behaviorJoiner(item.id, 0).then(res => {
        this.$emit('onJoinerShow', item.id)
        }).catch(err => {
          this.$util.Tips({
            title: err
          });
        });
      }
    }
  }
</script>

<style lang="scss">
  ::-webkit-scrollbar {
       display: none;  
       width: 0 !important;  
       height: 0 !important;  
       -webkit-appearance: none;  
       background: transparent;  
   }
  .footer {
    /* height: 200px; */
    background-color: #fff;
    border-radius: 20rpx;
    margin-top: 28rpx;
    padding: 0 24rpx 10rpx;
    box-shadow: 0px 0px 20rpx 3rpx rgba(0, 0, 0, 0.04);

    .border {
      border-bottom: 1px solid #F5F5F7;
    }

    .footer_title {
      display: flex;
      justify-content: space-between;
      font-size: 36rpx;
      // height: 128rpx;
      line-height: 128rpx;
      font-weight: bold;

      navigator {
        font-size: 30rpx;
        color: rgba(61, 61, 61, 0.7);
        font-weight: normal;
      }
    }

    .my_pet {
      padding-bottom: 41rpx;
      // height: 171rpx;
      display: flex;
      align-items: center;
      width: 100%;
      overflow: hidden;
      white-space: nowrap;

      .my_pet_item {
        display: inline-block;
        width: 100%;
        height: 180rpx;
        box-sizing: border-box;

        .my_pet_item_text {
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          height: 100%;


          image {
            width: 184rpx;
            height: 108rpx;
          }

          text {
            font-size: 26rpx;
            margin-left: 12rpx;
            color: rgba(61, 61, 61, 0.6);
            margin-top: 10rpx;
          }
        }
      }

      .my_pet_list:last-child {
        margin-right: 0;
      }

      .my_pet_list {
        display: inline-block;
        width: 210rpx;
        // height: 280rpx;
        border-radius: 15rpx;
        border: 2rpx solid rgba(61, 61, 61, 0.1);
        margin-right: 20rpx;
        box-sizing: border-box;
        padding: 35rpx 0;

        .my_pet_list_text1 {
          font-size: 24rpx;
          padding: 0 24rpx;
          color: rgba(61, 61, 61, 0.5);
          display: flex;
          flex-wrap: wrap;
        }

        .my_pet_list_text {
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          height: 100%;

          .my_pet_list_img {
            width: 118rpx;
            height: 118rpx;
            border-radius: 10rpx;
            // margin-right: 17rpx;
            overflow: hidden;

            image {
              width: 100%;
              height: 100%;
            }
          }

          .my_pet_list_title {
            text-align: center;

            h1 {
              font-size: 30rpx;
              width: 148rpx;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              margin-top: 16rpx;
            }

            text {
              margin-top: 5rpx;
              font-size: 22rpx;
              color: rgba(61, 61, 61, 0.6);
            }
          }

          .my_pet_user_box_right {
            margin-top: 12rpx;

            .attention {
              padding: 0 30rpx;
              background-color: rgba(253, 211, 56, 1);
              border-radius: 26.5rpx;
              color: rgba(51, 51, 51, 1);
              font-size: 26rpx;
              text-align: center;
              line-height: 52rpx;
            }

            .attention1 {
              padding: 0 30rpx;
              background-color: rgba(253, 211, 56, 0.5);
              border-radius: 26.5rpx;
              color: rgba(51, 51, 51, 0.5);
              font-size: 26rpx;
              text-align: center;
              line-height: 52rpx;
            }
          }
        }
      }
    }

    .footer_text {
      height: 106rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .footer_text_img {
        display: flex;
        align-items: center;
        font-size: 30rpx;

        image {
          width: 36rpx;
          height: 36rpx;
          margin-right: 25rpx;
        }
      }
    }
  }
</style>
